<template>
    <div class="infoContent">
        <div class="text">获取结果:</div>
        <div class=""><input type="text" :value="info.coord" disabled /></div>
        <div class="img" @click="clipboard(info.coord)">
            <img src="@/assets/image/colip.png" alt="">
        </div>
        <div class="text">JSON:</div>
        <div class="">
          <textarea disabled>{{ info }}</textarea>
        </div>
        <div class="img" @click="clipboard(JSON.stringify(info))">
            <img src="@/assets/image/colip.png" alt="">
        </div>
      </div>

</template>
<style lang="scss" scoped>
.infoContent {
  width: 100%;
  height: 100%;
  padding: 16px 23px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2fr 10fr 1fr;
  gap: 5px;
  .text {
    text-align: center;
    line-height: 24px;
    height: 24px;
  }
}
.img {
  width: 18px;
  height: 18px;
  img{
    width: 100%;
    height: 100%;
  }
}
input[type="text"] {
  width: 100%;
  font-size: 12px;
  height: 24px;
  border: 1px solid #4d505e;
  background-color: #272729;
  padding: 0 5px;
  color: #ccc;
  box-sizing: border-box;
  border-radius: 2px;
}
textarea {
  width: 100%;
  font-size: 12px;
  border: 1px solid #4d505e;
  background-color: #272729;
  padding: 5px 5px;
  color: #ccc;
  box-sizing: border-box;
  border-radius: 2px;
  resize: none; /* 禁止用户调整textarea的大小 */
  overflow: hidden; /* 隐藏额外内容 */
  min-height: 150px; /* 设置最小高度 */
  max-height: 200px; /* 设置最大高度 */
}
</style>
<script setup>
import { ElMessage } from "element-plus";
defineProps({
    info:{
        type:Object,
        default:()=>{}
    }
})
const clipboard = async (val) => {
  await navigator.clipboard.writeText(val);
  ElMessage({
    message: "复制成功",
    type: "success",
    plain: true,
  });
};
</script>